<script setup lang="ts" name="ApplicationDevelopDetails">
import { computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import BasicInfo from './BasicInfo.vue'
import PageManage from '@/MainApp/views/function-design/page-manage/page-manage.vue'
import ModelManage from '@/MainApp/views/function-design/model-manage/model-manage.vue'
import MenuManage from '@/MainApp/views/system-manage/menu-manage/menu.vue'
import { api } from '@/MainApp/apis/application'

const props = defineProps({
  application: {
    type: Object,
    default: null
  }
})
const emit = defineEmits(['back'])
const router = useRouter()
const { msgError, msgSuccess } = useMessage()

const tabContentMap: any = {
  basicInfo: BasicInfo,
  pageManage: PageManage,
  modelManage: ModelManage,
  menuManage: MenuManage
}

const state = reactive({
  loading: false,
  tabs: [
    // { id: 'basicInfo', label: '基本信息' },
    { id: 'pageManage', label: '页面管理' },
    { id: 'modelManage', label: '模型管理' },
    { id: 'menuManage', label: '菜单管理' }
  ],
  activeTab: 'pageManage'
})

const currentComponent = computed(() => tabContentMap[state.activeTab])

const methods = {
  back: () => {
    emit('back')
  },
  preview: () => {
    const url = `?domain=APPLICATION&xTenant=APP_PREVIEW&code=${props.application.code}${router.resolve({ path: props.application.indexPath }).href}`
    window.open(url)
  },
  publish: async () => {
    state.loading = true
    const res = await api.publish(props.application?.id)
    state.loading = false
    if (!res.success) {
      msgError(res.msg)
      return
    }
    msgSuccess(res.msg)
  }
}
</script>

<template>
  <div id="application-details-content" class="details-content">
    <IkPageHeader title="" class="header" @back="methods.back">
      <template #title>
        <IkSideText
          :avatar="props.application?.icon"
          avatar-type="icon"
          :name="props.application?.name"
          :text="props.application?.name"
          :sub-text="props.application?.typeName"
        />
      </template>
      <template #right>
        <el-button :loading="state.loading" type="primary" @click="methods.preview">预览</el-button>
        <el-button :loading="state.loading" type="primary" @click="methods.publish">发布</el-button>
      </template>
    </IkPageHeader>
    <IkPageTabs
      v-model="state.activeTab"
      split
      lazy-tab
      default-slot
      :tabs="state.tabs"
      :inner-name="state.activeTab"
    >
      <component :is="currentComponent" as-component :application="props.application" />
    </IkPageTabs>
  </div>
</template>

<style lang="scss" scoped>
:deep(.header){
  padding: 0 24px;
}

.details-content{
  // margin-top: var(--ik-margin-top-with-bread) !important;
  position: relative;
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

// :deep(#application-details-content .el-tabs.gl-padding){
//   margin-top: 0;
// }
</style>
